<template>
  <div style="height: 90%; width: 100%">
    <div class="broadbandDevelopment" style="height: 100%; width: 100%"></div>
  </div>
</template>

 <script>
export default {
  name: "basicIncome",
  props: {
    fusionRateEchart: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    fusionRateEchart(val) {
      var min = Math.min.apply(null, val.yAxis);
      this.getPie(val, min);
    },
  },
  methods: {
    getPie(val, min) {
      const that = this;
      var myChart = this.$echarts.init(
        document.querySelector(".broadbandDevelopment")
      );
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b} {c}%",
        },

        grid: {
          left: "30px",
          right: "20px",
          // bottom: "20px",
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: val.xAxis,
          axisLabel: {
            interval: 0,
            rotate: 33,
            fontSize: '12px'
          },
        },
        yAxis: {
          type: "value",

          splitLine: { show: false }, //去除网格线
          min: min * 2,
          // // interval: 50,
          axisLabel: {
            formatter: "{value} %",
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
        },
        series: {
          type: "bar",
          name: "2020年完成率",
          data: val.yAxis,
          barWidth: 20,
          itemStyle: {
            normal: {
              color: function (params) {
                var c = "";
                var index = val.xAxis.indexOf("浙江");
                if (params.dataIndex != index) {
                  c = "#0070c0";
                } else {
                  c = "#c00000";
                }
                return c;
              },
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#0070c0",
                },
                formatter: "{c}%",
              },
            },
          },
          // itemStyle: {
          //             normal: {
          //                 // 随机显示
          //                 //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

          //                 // 定制显示（按顺序）
          //                 color: function(params) {
          //                     var colorList = ['#c00000','#0070c0'];
          //                     return colorList[params.dataIndex]
          //                 }
          //             },
          //         },
        },
      };
      myChart.setOption(option);
    },
  },
};
</script>

 <style>
</style>
